<template>
	<view>
		<!-- <view class="mainpadding" style="background: linear-gradient( 179deg, #cffaef 0%, #FAFAFA 100%);">
			<u-tabs :list="list1" lineColor="#FF2D2D" @click="changetab" :activeStyle="{
				    color: '#333333',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				            color: '#4E5969',
							fontWeight: '500',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 25px; padding-right: 25px; height: 44px;"></u-tabs>
		</view> -->
		<view class="mainpadding2">
			<view class="margin_top ffffff radius" v-for="item in list.data" :key="item.id"  @click="jumpdetail('/pages/qingcanyu/huodongxq?id=',item.id)">
				<view class="">
					<image style="border-radius: 24rpx 24rpx 0 0 ; width: 100%;height: 300rpx;" :src="item.image_text" mode=""></image>
					<view class="mainpadding" style="border-radius: 0 0 24rpx 24rpx;">
						<view class="flexbetween">
							<view class="">
								<view class="titletext xiaohei fonweight xiankuan" style="width: 400rpx;">{{item.name}}</view>
								<view class="ershil xiaohui margin_top1">{{item.bs_starttime_text}}</view>
							</view>
							<!-- activity_status,1未开始，2报名中，3活动待开始，4开始中，5已结束 -->
							<view class="hhvbtn flexcenter" v-if="item.activity_status==1">未开始</view>
							<view class="hhvbtn flexcenter" v-if="item.activity_status==2">可报名</view>
							<view class="hlvbtn flexcenter" v-if="item.activity_status==3">待开始</view>
							<view class="hlvbtn flexcenter" v-if="item.activity_status==4">进行中</view>
							<view class="huivbtn flexcenter" v-if="item.activity_status==5">已结束</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list1: [{
						name: '全部',
						value: 0,
					},
					{
						name: '报名中',
						value: 1,
					},
					{
						name: '进行中',
						value: 2,
					},
					{
						name: '已结束',
						value: 3,
					}
				],
				resultcode: 0,
				page: 1,
				limit: 12,
				list: {
					data: []
				},
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(isPage, page) {
				httpRequest.request("/api/activitycl/myActivityIndex", 'GET', {
					page: page || 1,
					limit: this.limit,
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = this.list;
						if (isPage == true) {
							this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			changetab(e) {
				console.log(e, 999)
				this.resultcode = e.value
				this.init()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huivbtn{
		width: 158rpx;
		height: 56rpx;
		background:#E5E6EB;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 30rpx;
		color:#86909C;
		font-weight: 500;
	}
	.hhvbtn{
		width: 158rpx;
		height: 56rpx;
		background:#f7ba1e;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		font-weight: 500;
	}
.hlvbtn{
	width: 158rpx;
	height: 56rpx;
	background: #00B42A;
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	font-size: 30rpx;
	color: #FFFFFF;
	font-weight: 500;
}
</style>
